﻿<link href="/UI/css/components/components.min.css" rel="stylesheet" />
<template>
    <ul class="v-tree">
        <template v-for="(i,index) in items">
            <!--默认渲染方式，取枚举对象的value或name属性-->
            <li v-if="!template" :key="i.idstr">
                <div v-bind:style="{paddingLeft:(treelv*2)+'rem'}" class="v-tree-item" :class="{slcted:_vt_state.slcted==i}" @click.stop="SlctItem(i,$event)" @dblclick.stop="ConfirmItem(i,$event)">
                    <i v-if="showexpander&&(i.children||treelv==1)" class="v-tree-expander soicon" :class="{'icon-minus-outline':i._sub_expanded||!i.children,'icon-add-outline':!i._sub_expanded&&i.children}" :style="{left:(treelv*2-2)+'rem'}" @click.stop="ExpandSub(i,$event)"></i>
                    <span v-if="showexpander&&!i.children&&treelv>1" class="v-tree-line" :class="{'terminal':index==items.length-1}" :style="{left:(treelv*2-2)+'rem'}"></span>
                    <div style="width:100%" class="nowrap-ellipsis">{{i.value||i.name||'-'}}</div>
                </div>
                <sub-tree v-if="i.children" :items="i.children" :template="template" :treelv="treelv+1" :showexpander="showexpander"  :_vt_expand="i._sub_expanded" :_vt_state="_vt_state" @itemslcted="SlctItem" @itemconfirmd="ConfirmItem" :item_methods="$props.item_methods"></sub-tree>
            </li>
            <!--自定义渲染方式-->
            <li v-else :key="i.idstr">
                <div v-bind:style="{paddingLeft:(treelv*2)+'rem'}" class="v-tree-item" :class="{slcted:_vt_state.slcted==i}" @click.stop="SlctItem(i,$event)" @dblclick.stop="ConfirmItem(i,$event)">
                    <i v-if="showexpander&&(i.children||treelv==1)" class="v-tree-expander soicon" :class="{'icon-minus-outline':i._sub_expanded||!i.children,'icon-add-outline':!i._sub_expanded&&i.children}" :style="{left:(treelv*2-2)+'rem'}" @click.stop="ExpandSub(i,$event)"></i>
                    <span v-if="showexpander&&!i.children&&treelv>1" class="v-tree-line" :class="{'terminal':index==items.length-1}" :style="{left:(treelv*2-2)+'rem'}"></span>
                    <tree-item v-once :obj="i"></tree-item>
                </div>
                <sub-tree v-if="i.children" :items="i.children" :template="template" :treelv="treelv+1" :showexpander="showexpander" :_vt_expand="i._sub_expanded" :_vt_state="_vt_state" @itemslcted="SlctItem" @itemconfirmd="ConfirmItem"  :item_methods="$props.item_methods"></sub-tree>
            </li>
        </template>
    </ul>
</template>
<script>
    vm = {
        created: function () {
            if (this.$props.template) {
                var tr = Vue.extend({
                    props: ['obj'],
                    template: this.$props.template,
                    methods:this.$props.item_methods
                });
                this.$options.components["tree-item"] = tr;
            }
        },
        props: {
            slctble: {
                type: Boolean,
                default:true
            },
            showexpander: {
                type: Boolean,
                default:true
            },
            treelv: {
                type: Number,
                default:1
            },
            template: {
                type: String,
                default:undefined
            },
            item_methods:{
            },
            items: {
                type: Array,
                default: [
                    {
                        value: '-',
                        children: [
                            {
                                value: '-',
                                children: []
                            }
                        ]
                    }
                ]
            },
            _vt_state: {
                type: Object,
                default: function(){
                    return {
                        slcted:null
                    }
                }
            },
            _vt_expand: {
                type: Boolean,
                default:true
            }
        },
        data: function () {
            return {};
        },
        watch:{
            _vt_expand: function () {
                var subTree = $(this.$el);
                if (!this._vt_expand) {
                    var h = subTree.height();
                    subTree.attr("_vh", h);
                    subTree.css("overflow", "hidden").animate({ height: 0 }, 400, 'linear');
                }
                else {
                    var h = subTree.attr("_vh");
                    subTree.animate({ height: h }, 400, 'linear', function () { $(this).css({height:'',overflow:'visible'}); });
                }
            }
        },
        methods: {
            SlctItem: function (i, ev) {
                if (this.slctble === true) {
                    this._vt_state.slcted = i;
                    if (ev) {
                        i.$event = ev;
                    }
                    this.$emit("itemslcted", i);
                }
            },
            ConfirmItem:function(i,ev){
                if (this.slctble === true) {
                    this._vt_state.slcted = i;
                    if (ev) {
                        i.$event = ev;
                    }
                    this.$emit("itemconfirmd", i);
                }
            },
            ExpandSub: function (i,ev) {
                i._sub_expanded = !i._sub_expanded;
            }
        },
        components: {
            "sub-tree": SoBiz.LoadVue("/ui/components/v_tree.html")
        }
    }
</script>